<template>
  <div v-if="name !== ''">
    <el-row style="text-align: center;display: block; background-color: #009bff; font-size: 28px;">{{ name }}</el-row>
    <el-row>
      <!-- 聊天面板 -->
      <el-col :span="18">
        <div id="dataShow" onmouseover="this.style.overflow='overlay'" onmouseout="this.style.overflow='hidden'"
          class="dataShow">
          <div v-for="(item, index) in radioInfoList" :key="index" style="background-color: #f5f5f5; padding:10px;">
            <el-row>
              <el-col :span="2" v-if="!(item.user == userStore.getUserAccount || item.user == '周先生')">
                <el-icon size="300%">
                  <User />
                </el-icon>
              </el-col>
              <el-col :span="22">
                <span :class="item.user == userStore.getUserAccount || item.user == '周先生' ? 'usermsg' : 'othermsg'">
                  {{ item.message }}
                </span>
              </el-col>
              <el-col :span="2" v-if="item.user == userStore.getUserAccount || item.user == '周先生'">
                <el-icon size="300%">
                  <User />
                </el-icon>
              </el-col>
            </el-row>
          </div>
        </div>
        <div>
          <div>
            <el-input v-model="sendmsg" type="textarea" :autosize="{ minRows: 5, maxRows: 5 }" resize="none" autofocus
              maxlength="500">
            </el-input>
          </div>
          <div class="sendButton">
            <el-button @click="sendMessage">发送</el-button>
          </div>
        </div>
      </el-col>
      <!-- 交易面板+群组成员(classname=='group') -->
      <el-col :span="5" :offset="1" style="margin:5% 0 0 0;">
        <el-form :inline="true" :model="Trade" class="demo-form-inline">
          <el-form-item label="委托数量">
            <el-input v-model="Trade.mount" clearable />
          </el-form-item>
          <el-form-item label="委托价格">
            <el-input v-model="Trade.price" clearable />
          </el-form-item>
          <el-form-item>
            <!-- 发起交易 -->
            <el-button type="primary" @click="onSubmit">发起</el-button>
            <el-button @click="resetForm(Trade)">重置</el-button>
          </el-form-item>
        </el-form>

        <el-row v-if="classname == 'group'">
          <el-text>
            群组成员
          </el-text>
        </el-row>
        <el-row v-if="classname == 'group'">
          <ul v-for="m in members" :key="m.name" class="infinite-list">
            <li class="infinite-list-item">
              <el-icon size="100%">
                <User />
              </el-icon>&emsp14;
              {{ m.name }}
            </li>
          </ul>
        </el-row>
      </el-col>
    </el-row>
  </div>
</template>
<script setup lang='ts'>
import { ref, reactive, watch, nextTick } from 'vue';
import { useUserStore } from '@/stores/user';

defineProps(['name', 'classname'])
const userStore = useUserStore();
const sendmsg = ref('')

// 交易表单
const Trade = reactive({
  mount: '',
  price: ''
})
// 群组成员
const members = [{
  imgurl: '',
  name: '周先生'
}, {
  imgurl: '',
  name: '李先生'
}]

// 消息列表
const radioInfoList = reactive([{
  user: '周先生',
  message: '好的',
  time: '2019-11-19 09:11:03'
}, {
  user: '专属客服小美',
  message: ' 周先生，你满意本次服务的话请给个好评？\n',
  time: '2019-11-19 09:11:26'
}, {
  user: '周先生',
  message: '再见',
  time: '2019-11-19 09:11:40'
}, {
  user: '专属客服小美',
  message: '好的，周先生，再见，祝您生活愉快',
  time: '2019-11-19 09:11:55'
}])

function sendMessage() {
  console.log('发送消息')
  if (sendmsg) {
    radioInfoList.push({
      user: '周先生',
      message: sendmsg.value,
      time: Date.now.toString()
    })
    sendmsg.value = ''
  }
}
const onSubmit = () => {
  console.log('submit!')
}
const resetForm = (formEl: any) => {
  if (!formEl) return
  formEl.resetFields()
}

// 监听事件
watch(() => radioInfoList.length, () => {
  // 滚动到底部
  nextTick(() => {
    var scored = document.getElementById('dataShow')
    if (scored) scored.scrollTop = scored.scrollHeight
  })
})
</script>
<style lang="scss" scoped>
.infinite-list {
  height: 50px;
  padding: 0;
  margin: 0;
  list-style: none;
}

.infinite-list .infinite-list-item {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 50px;
  margin: 10px;
}

.infinite-list .infinite-list-item+.list-item {
  margin-top: 10px;
}

.font {
  font-size: 16px;
  font-weight: bold;
  font-family: "微软雅黑 Light";
}

.dataShow {
  height: 400px;
  overflow-y: auto;
  overflow-x: hidden;
  background-color: #00800000;
}

::-webkit-scrollbar {
  display: none;
}

.usermsg {
  float: right;
  position: relative;
  display: inline-block;
  max-width: calc(40%);
  min-height: 35px;
  line-height: 2.1;
  font-size: 15px;
  padding: 6px 10px;
  text-align: left;
  word-break: break-all;
  background-color: #009bff;
  color: #000;
  border-radius: 4px;
  box-shadow: 0px 1px 7px -5px #000;
  border: 0px solid #000;
  margin-top: 0;
  margin-right: 10px;
}

.usermsg:after {
  content: "";
  border-top: solid 5px #00800000;
  border-left: solid 10px #009bff;
  border-right: solid 10px #00800000;
  border-bottom: solid 5px #00800000;
  position: absolute;
  top: 10px;
  left: 100%;
}

.othermsg {
  display: inline-block;
  line-height: 30px;
  font-style: normal;
  background-color: white;
  letter-spacing: 2px;
  position: relative;
  max-width: calc(40%);
  min-height: 35px;
  line-height: 2.1;
  font-size: 15px;
  padding: 6px 10px;
  text-align: left;
  word-break: break-all;
  border-radius: 4px;
  color: #000;
  box-shadow: 0px 1px 7px -5px #000;
  border: 0px solid #000;
  margin-top: 0;
  margin-left: 10px;
}

.othermsg:after {
  content: "";
  border-top: solid 5px #00800000;
  border-left: solid 10px #00800000;
  border-right: solid 10px white;
  border-bottom: solid 5px #00800000;
  position: absolute;
  top: 10px;
  right: 100%;
}

.sendButton {
  position: relative;
  z-index: 10;
  float: right;
  margin-top: -50px;
  margin-right: 30px;
}
</style>